<!-- selected_data.html -->
{% load static %}
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>选中的数据</title>
    <link rel="stylesheet" href="/static/js/JsBarcode.all.min.js" />
    <script src="{% static 'js/JsBarcode.all.min.js' %}"></script>
    <style>

      body{
        margin:0;
      }
      table{
        margin:0;
      }
      /* header, h1 {
        position: fixed;
        top: 0;
        left: 20%;
        width: 100%; 
        z-index: 10; 
      } */
      /* 移除表格的默认边框合并，以便单独为每个单元格添加边框 */
      table {
        border-collapse: separate;
      }
      /* 给每个td添加底部边框，从而为每行tr创建分隔线 */
      /* 给每个td添加内边距 */
      /* td,
      th {
        padding: 8px;
      } */
       
      /* 选择每个tr的最后一列td，并添加底部边框 */
      /* 下边框，颜色为黑色 */
      /* tr td:last-child {
        border-bottom: 10px solid #000; 
      } */
      /* 选择第一个tr的第一个td，并添加上边框 */
      /* 上边框，颜色为黑色 */
      /* tr:first-child td:first-child {
        border-top: 10px solid #000; 
      } */
      td {
        display: block;
      }

      /* 选择第4行的特定td元素 */
      td:nth-child(4) {
        display: inline-block;
        margin-right: 5px;
      }
      /* 选择第5行的特定td元素 */
      td:nth-child(5) {
        display: inline-block;
      }

      /* canvas {
        width: 80%;
        height: 25;
      } */

      canvas {
        
  /* margin-left: auto !important;
  margin-right: auto !important; */
  display: block !important;
  width: 300px !important;
  height: 30px !important;
}

      @media print {
        /* 设置较小的页面边距 */
        @page {
          /* margin: 0.5cm; */
          /* size:60mm 30mm; */
        }
        /* canvas {
          width: 80%;
          height: 25;
        } */
         body{
          margin:0;
         }
         
        canvas {
        /* margin-left: auto;
        margin-right: auto; */
        display: block; /* 确保canvas是块级元素 */
        width: 80%;
        /* height: 25%; */
      }
      td:nth-child(1) {
        font-size : larger;
      }
     
      td:nth-child(3) {
        font-size : larger;
      }
      td:nth-child(2) {
        font-size : larger;
      }
     
      td:nth-child(3) {
        font-size : larger;
      }
      

      /* 选择第4行的特定td元素 */
      td:nth-child(4) {
        display: inline-block;
        margin-right: 5px;
        
      }
      /* 选择第5行的特定td元素 */
      td:nth-child(5) {
        display: inline-block;
      }

        tr td:last-child {
          border-bottom: none;
        }
        tr:first-child td:first-child {
          border-top: none;
        }

        /* 保持内容的显示，不隐藏header, footer, nav, form */
        header,
        footer,
        nav,
        form {
          display: block;
        }

        /* 调整表格和单元格的字体大小 */
        table,
        th,
        td {
          font-size: smaller; /* 减小字体大小 */
        }

        td {
          display: block;
        }

        /* table th:nth-of-type(2),table td:nth-of-type(2) {
        width: 10%;
      } */
        /* 如果需要，可以取消分页规则 */
        tr:nth-child(1n) {
          page-break-before: always; /* 一条数据一页 */
        }

        /* 如果需要，可以取消分页规则 */
        /* table {
    page-break-inside: avoid;
  } */

        /* 其他打印样式规则 */
        /* 隐藏不需要打印的部分 */
        header,
        footer,
        nav,
        form,
        h1 {
          display: none;
        }
      }
    </style>
  </head>
  <body>
    <h1>选中的数据</h1>
    <header>
      <nav>
        <button id="backButton">返回首页</button>
        <button id="printButton">点击我打印</button>
        <input type="text" id="input-quantity" placeholder="输入合格数量">
      </nav>
    </header>
    <table>
      <tbody id="data-table-body">
        <!-- 数据行将在这里动态添加 -->
      </tbody>
    </table>
       <!-- <script>
        document.addEventListener("DOMContentLoaded", function () {

// 获取输入框元素
var inputQuantityElement = document.getElementById("input-quantity");

// 为输入框添加 input 事件监听器
inputQuantityElement.addEventListener("input", function () {
    // 当输入框内容变化时，更新 inputQuantity 的值
    var inputQuantity = inputQuantityElement.value;
    // 这里可以添加其他逻辑，例如更新表格或条形码等
    // 例如：更新表格的合格数量列
    updateTableWithInputQuantity(inputQuantity);
});

            // 获取刷新按钮元素
                var refreshButton = document.getElementById("refreshButton");

            // 为刷新按钮添加点击事件监听器
            refreshButton.addEventListener("click", function () {
                // 刷新当前页面
                window.location.reload();
            });
          // 获取打印按钮元素
          var printButton = document.getElementById("printButton");
  
          // 为打印按钮添加点击事件监听器
          printButton.addEventListener("click", function () {
            // 直接调用window.print()方法来触发打印对话框
            window.print();
          });
  
          // 获取返回按钮元素
          var backButton = document.getElementById("backButton");
          // 为返回按钮添加点击事件监听器
          backButton.addEventListener("click", function () {
              // 跳转到首页
            window.location.href = "http://192.168.12.2:8000/";
          //   window.location.href = "http://127.0.0.1:8000/";
          });
          var data = {{ data|safe }}; // 使用 Django 模板标签将 data 传递给 JavaScript
  
  
          // 获取表格的tbody元素
          var tableBody = document.getElementById("data-table-body");
  
          // 遍历数据数组，为每条数据创建表格行
          data.forEach(function (rowData) {
            var row = tableBody.insertRow();

            // 定义每个单元格的内容，添加一个变量来存储输入框的值
    var inputQuantity = document.getElementById("input-quantity").value;
    // 检查 inputQuantity 是否为空
if (!inputQuantity) {
    // 如果为空，使用 rowData["合格数量"] 的值
    inputQuantity = rowData["合格数量"];
}

            // 定义每个单元格的内容
            var contents = [
              { text: "存货编码", data: rowData["存货编码"] },
              { text: "存货名称", data: rowData["存货名称"] },
              { text: "批号", data: rowData["批号"] },
              { text: "生产日期", data: rowData["生产日期"] },
            //   { text: "合格数量", data: rowData["合格数量"] },
              { text: "合格数量", data: inputQuantity }, // 使用输入框的值
              { text: "品牌", data: rowData["品牌"] },
              { text: "规格型号", data: rowData["规格型号"] },
            ];
  
            // 遍历内容数组，为每个内容创建单元格
            contents.forEach(function (content, index) {
              var cell = row.insertCell(index);
              var cellDiv = document.createElement("div");
              cellDiv.textContent = content.text + ": " + content.data;
              cell.appendChild(cellDiv); // 先添加文本div
  
              // 为存货编码和批号添加条形码
              if (index === 0 || index === 2) {
                var canvas = document.createElement("canvas");
              //   canvas.width = 244;
              //   canvas.height = 70;
                cell.appendChild(canvas);
                JsBarcode(canvas, content.data, { format: "CODE128" });
              }
            });
          });
          
        });
      </script> -->

      <script>
        document.addEventListener("DOMContentLoaded", function () {
    // 获取输入框元素
    var inputQuantityElement = document.getElementById("input-quantity");

    // 为输入框添加 input 事件监听器，用于实时更新合格数量
    inputQuantityElement.addEventListener("input", function () {
        // 获取当前输入框的值
        var inputQuantity = inputQuantityElement.value;

        // 调用函数更新表格中的合格数量
        updateTableQuantity(inputQuantity);
    });

    // 获取打印按钮元素
    var printButton = document.getElementById("printButton");
    printButton.addEventListener("click", function () {
        // 直接调用window.print()方法来触发打印对话框
        window.print();
    });

    // 获取返回按钮元素
    var backButton = document.getElementById("backButton");
    backButton.addEventListener("click", function () {
        // 跳转到首页
        window.location.href = "http://192.168.12.2:9000"; // 确保这是正确的URL
    });

    // 假设 data 是从服务器获取的数据
    var data = {{ data|safe }}; // 使用 Django 模板标签将 data 传递给 JavaScript

    // 获取输入框元素
    var inputQuantityElement = document.getElementById("input-quantity");

    // 将数据渲染到表格中
    renderTable(data);

    // 函数：更新表格中的合格数量
    function updateTableQuantity(inputQuantity) {
        var tableBody = document.getElementById("data-table-body");
        // 遍历所有行，更新合格数量列的值
        for (var i = 0; i < tableBody.rows.length; i++) {
            var quantityCell = tableBody.rows[i].cells[4]; // 假设合格数量是第5列
            // 设置单元格内容为 "合格数量：" 加上输入框的值
            quantityCell.textContent = "合格数量：" + inputQuantity;
        }
    }

    // 函数：将数据渲染到表格中
    function renderTable(data) {
        var tableBody = document.getElementById("data-table-body");
        tableBody.innerHTML = ''; // 清空现有的表格内容

        data.forEach(function (rowData) {
            var row = tableBody.insertRow();

            // 定义每个单元格的内容，除了合格数量之外
            var contents = [
                { text: "存货编码", data: rowData["存货编码"] },
                { text: "存货名称", data: rowData["存货名称"] },
                { text: "批号", data: rowData["批号"] },
                { text: "生产日期", data: rowData["生产日期"] },
                { text: "", data: "" }, // 预留合格数量的位置，稍后设置
                { text: "品牌", data: rowData["品牌"] },
                { text: "规格型号", data: rowData["规格型号"] },
            ];

            contents.forEach(function (content, index) {
                var cell = row.insertCell(index);
                // 如果不是合格数量列，则直接设置文本内容
                if (index !== 4) {
                    cell.textContent = content.text + ": " + content.data;
                } else {
                    // 对于合格数量列，设置初始值并添加事件监听器
                    cell.textContent = "合格数量：";
                    var quantityDisplay = document.createTextNode(inputQuantityElement.value);
                    console.log(quantityDisplay);
                    
                    // 检查 inputQuantity 是否为空
                    if (quantityDisplay.textContent === "") {
                        // 如果为空，使用 rowData["合格数量"] 的值
                        quantityDisplay = document.createTextNode(rowData["合格数量"]);
            
                        console.log("为空");
                    }
                    cell.appendChild(quantityDisplay);
                    // 更新合格数量显示
                    inputQuantityElement.addEventListener('input', function () {
                        quantityDisplay.textContent = this.value;
                    });
                }

                // 为存货编码和批号添加条形码
                if (index === 0 || index === 2) {
                    var canvas = document.createElement("canvas");
                    cell.appendChild(canvas);
                    JsBarcode(canvas, content.data, { format: "CODE128" });
                }
            });
        });
    }

});
      </script>
  </body>
</html>
